<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../../vue.js"></script>
  </head>
  <body>
    <div id="app">
       <!-- 
        事件修饰符:
          修饰符是对某条指令的补充
          .stop:阻止事件传播
          .capture:让当前的事件在捕获的阶段执行
          .prevent:阻止默认事件
          .self:只有事件真正发生在自己身上的时候才会触发
          .once:一次性事件

          .enter:按键修饰符-回车键
          ... 其他按钮修饰符
       -->
       <div @click.self="myAlert('outer')">
        outer
        <div @click.capture="myAlert('inner')">
          inner
          <div @click="myAlert('content')">content</div>
        </div>
      </div>

      <form action="###">
        <button @click.prevent.once="myAlert('点击了按钮')">按钮</button>
      </form>

      <input type="text" @keyup.enter="myAlert('敲击键盘')" />
      <input type="text" @keyup.13="myAlert('敲击键盘')" />
    </div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
          };
        },
        methods: {
          myAlert(mes) {
            alert(mes);
          },
        },
      });
    </script>
  </body>
</html>
